<template>
  <view class="b-w send-page">
    <u--form labelPosition="left" :model="sendData" :rules="rules" ref="uForm">
      <u-form-item label="接收人" labelWidth="50" borderBottom prop="targetUserName">
        <u--input
          disabledColor="#ffffff"
          :disabled="true"
          v-model="sendData.targetUserName"
          placeholder="输入接收人"
          border="none"
        ></u--input
      ></u-form-item>
      <u-form-item label="发送内容" labelWidth="80" prop="content">
        <u--textarea
          v-model="sendData.content"
          maxlength="500"
          count
          autoHeight
          placeholder="请输入内容"
        ></u--textarea>
      </u-form-item>
      <view class="confirm-btn">
        <u-button type="primary" @click="handleSubmit" text="提交"></u-button>
      </view>
    </u--form>
  </view>
</template>
<script>
export default {
  data() {
    return {
      targetUser: '',
      sendData: {
        targetUserName: '',
        content: '',
      },
      rules: {
        targetUserName: {
          type: 'string',
          required: true,
          message: '请填写接收人',
          trigger: ['blur', 'change'],
        },
        content: {
          type: 'string',
          required: true,
          message: '请输入内容',
          trigger: ['blur', 'change'],
        },
      },
    }
  },
  onLoad(options) {
    this.targetUser = options.id
    this.sendData.targetUserName = options.name
  },
  onReady() {
    //如果需要兼容微信小程序，并且校验规则中含有方法等，只能通过setRules方法设置规则。
    this.$refs.uForm.setRules(this.rules)
  },
  methods: {
    handleSubmit() {
      this.$refs.uForm.validate().then((res) => {
        this.$request('/message/message', {
          targetUser: this.targetUser,
          content: this.sendData.content,
        }).then((res) => {
          this.$utils.toast('发送成功')
          setTimeout(() => {
            uni.navigateBack()
          }, 1000)
        })
      })
    },
  },
}
</script>
<style lang="scss" scoped>
.send-page {
  padding: 20rpx;
  margin: 20rpx;
  border-radius: 10rpx;
}
</style>
